import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';




class OwlFrostedGlass extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }

    ready(){

        super.ready();
        this.$.imgbg.src=this.bgsrc;
        this.$.imgbg.style.filter='blur('+this.blur+')';
        this.$.imgbg.style.opacity=this.opac;
    }
    static get properties() {

        return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        bgsrc: {

            type:String,
            value:""
        },
       blur:{

            type:String,
             value:"30px"
       },
       opac:{

            type:String,
           value:"0.8"

       }

    }};



    static get template() {
        return html`
             <style>
             
             .owl-frosted-glass{
             
                width: 100%;
                height: 100%;
                position: absolute;
             }
             
              .owl-frosted-glass img{
              
                width: 100%;
                height: 100%;
                filter: blur(30px);
                -webkit-filter: blur(30px);
                opacity: 0.8;
         
              }
     
            </style>
        
          <div class="owl-frosted-glass" id="airbox">
              <img src="../" id="imgbg">
          </div>
                    
        
        `;
    }

}

customElements.define("owl-frosted-glass",OwlFrostedGlass);
